<template>
  <div class="header">
    <Header :title="'实时监测数据'"></Header>
  </div>
  <div class="content">
    <div class="aside">
      <div class="calendar card">
        <el-calendar v-model="chosedDay" />
      </div>
      <div class="weather_list card">
        <div class="cur_weather_label">实时天气情况</div>
        <div class="cur_weather_value"><span>30℃</span> &nbsp;晴 东南风</div>
        <div class="cur_weather_value"></div>
        <div class="feature_weather">
          <div class="feature_weather_item">
            <div>明天</div>
            <div>23℃ 多云</div>
            <img src="@/assets/images/1.png" />
          </div>
          <div class="feature_weather_item">
            <div>后天</div>
            <div>28℃ 晴</div>
            <img src="@/assets/images/2.png" />
          </div>
        </div>
      </div>
      <div class="transmission_rate card">
        <div class="transmission_rate_label">当前传输速率</div>
        <div class="transmission_rate_value">{{ speed }}MB/S</div>
      </div>
    </div>
    <div class="main">
      <div class="cur_weather">
        <div class="weather_item card">
          <div id="temperature" style="width: 100%; height: 80%"></div>
          <div class="cur_weather_title">实时温度：30 ℃</div>
        </div>
        <div class="weather_item card">
          <div id="humidity" style="width: 100%; height: 80%"></div>
          <div class="cur_weather_title">实时湿度：55%</div>
        </div>
        <div class="weather_item card">
          <div id="cooconcentration" style="width: 100%; height: 80%"></div>
          <div class="cur_weather_title">二氧化碳浓度：23%</div>
        </div>
        <div class="weather_item card">
          <div id="light" style="width: 100%; height: 80%"></div>
          <div class="cur_weather_title">光照强度：68%</div>
        </div>
      </div>
      <div class="msg_video">
        <div class="noitce card">
          <div class="important_msg"><h4>重要通知</h4></div>
          <div class="warning_information">
            <div class="warning_title">预警信息（作物）</div>
            <div class="warning_list">
              <div
                class="warning_item"
                v-for="(item, i) in cropWarningList"
                :key="i"
              >
                <div class="warning_item_index">{{ i + 1 }}.</div>
                <div class="warning_item_content">{{ item.msg }}</div>
              </div>
            </div>
          </div>
          <div class="warning_information">
            <div class="warning_title">设备故障报警信息</div>
            <div class="warning_list">
              <div class="warning_item" v-for="(item, i) in 16" :key="i">
                <div class="warning_item_index">{{ i + 1 }}.</div>
                <div class="warning_item_content">
                  <div class="warning_item_title">
                    {{ item.time }} {{ item.title }}
                  </div>
                  <div class="warning_item_msg">{{ item.msg }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="cur_video card" @click="goToControlPage">
          <video controls>
            <source src="@/assets/video.mp4" type="video/mp4" />
          </video>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { useRouter } from "vue-router"
import Header from "@/components/header/header.vue"
import * as echarts from "echarts"
import { getMsg } from "@/api/index"
const chosedDay = ref(new Date()) //日历选择的日期

const router = useRouter()
const goToControlPage = () => {
  router.push({
    path: "map",
  })
}

onMounted(() => {
  getTimeArr()
  getMsgList()
  drawTemperatureEcharts()
  drawHumidityEcharts()
  drawCooconcentrationEcharts()
  // drawFatnessEcharts()
  drawLightEcharts()
})
const getMsgList = () => {
  getMsg().then((res) => {
    console.log(res)
    // 数据处理...
  })
}
let data: any = ref([])
const getTimeArr = () => {
  let time: number = new Date().getHours()
  for (let i = 0; i < 5; i++) {
    data.value.push(time.toString() + ":00")
    if (time === 0) {
      time = 24
    }
    time--
  }
  data.value.reverse()
}

const drawTemperatureEcharts = () => {
  let temperature: any = document.getElementById("temperature")
  const TemperatureEcharts = echarts.init(temperature)
  const color = "#fff"

  const option = {
    xAxis: {
      type: "category",
      boundaryGap: false, //设置拐点在轴线上
      data: data.value,
      axisLine: {
        lineStyle: {
          color: color,
        },
      },
    },
    yAxis: {
      name: "℃",
      type: "value",
      show: false,
      axisLine: {
        lineStyle: {
          color: color,
        },
      },
    },
    grid: {
      left: "0%",
      bottom: "0%",
      containLabel: true,
    },
    series: [
      {
        data: [23, 26, 24, 29, 30],
        type: "line",
        smooth: true,
        label: {
          show: true,
          position: "bottom",
          color: color,
        },
        color: [color],
      },
    ],
  }
  TemperatureEcharts.setOption(option)
}
const drawHumidityEcharts = () => {
  let humidity: any = document.getElementById("humidity")
  const HumidityEcharts = echarts.init(humidity)
  const option = {
    xAxis: {
      type: "category",
      boundaryGap: false, //设置拐点在轴线上
      data: data.value,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      name: "℃",
      type: "value",
      show: false,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      left: "0%",
      bottom: "0%",
      containLabel: true,
    },
    series: [
      {
        data: [45, 60, 35, 80, 55],
        type: "line",
        smooth: true,
        label: {
          show: true,
          position: "bottom",
          color: "#fff",
        },
        color: ["#fff"],
      },
    ],
  }
  HumidityEcharts.setOption(option)
}

const drawCooconcentrationEcharts = () => {
  let cooconcentration: any = document.getElementById("cooconcentration")
  const CooconcentrationEcharts = echarts.init(cooconcentration)
  const option = {
    xAxis: {
      type: "category",
      boundaryGap: false, //设置拐点在轴线上
      data: data.value,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      name: "℃",
      type: "value",
      show: false,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      left: "0%",
      bottom: "0%",
      containLabel: true,
    },
    series: [
      {
        data: [0.21, 0.2, 0.26, 0.17, 0.23],
        type: "line",
        smooth: true,
        label: {
          show: true,
          position: "bottom",
          color: "#fff",
        },
        color: ["#fff"],
      },
    ],
  }
  CooconcentrationEcharts.setOption(option)
}

const drawLightEcharts = () => {
  let light: any = document.getElementById("light")
  const LightEcharts = echarts.init(light)
  const option = {
    xAxis: {
      type: "category",
      boundaryGap: false, //设置拐点在轴线上
      data: data.value,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      name: "℃",
      type: "value",
      show: false,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      left: "0%",
      bottom: "0%",
      containLabel: true,
    },
    series: [
      {
        data: [65, 73, 78, 82, 68],
        type: "line",
        smooth: true,
        label: {
          show: true,
          position: "bottom",
          color: "#fff",
        },
        color: ["#fff"],
      },
    ],
  }
  LightEcharts.setOption(option)
}

let cropWarningList = reactive([
  {
    msg: "1号棚4号地块番茄出现细菌性斑点病",
  },
  {
    msg: "1号棚2号地块出现早疫病",
  },
  {
    msg: "2号棚5号地块出现叶霉病",
  },
])

let speed = ref<number>(37)
setInterval(() => {
  speed.value = Math.round(Math.random()*(41-20)+20)
}, 2000)
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 50px;
}

.content {
  display: flex;
  width: calc(100% - 32px);
  padding: 16px;
  height: calc(100% - 84px);

  .aside {
    width: 200px;
    height: 100%;
    .calendar {
      width: 100%;
      height: 342px;
      padding: 8px 0;
    }

    .weather_list {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: calc(85% - 408px);
      padding: 16px;
      margin-top: 16px;
      font-size: 16px;
      .cur_weather_label {
        margin-bottom: 8px;
      }
      .cur_weather_value {
        margin-top: 8px;
        span {
          font-size: 32px;
        }
      }
      .feature_weather {
        display: flex;
        justify-content: space-between;
        .feature_weather_item {
          width: calc(50% - 8px);
          text-align: center;
          border: 1px solid #fff;
          img {
            width: 32px;
            height: 32px;
          }
        }
      }
    }
    .transmission_rate {
      height: calc(15% - 48px);
      padding: 16px;
      margin-top: 16px;
      font-size: 16px;
      .transmission_rate_value {
        font-size: 32px;
        text-align: center;
        /* border:1px solid red; */
      }
    }
  }

  .main {
    width: calc(100% - 216px);
    height: 100%;
    margin-left: 16px;
    .cur_weather {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 240px;
      .weather_item {
        padding: 8px;
        width: calc(25% - 28px);
        font-size: 12px;
        text-align: center;
        .cur_weather_title {
          height: 20%;

          margin-top: 16px;
        }
      }
    }

    .msg_video {
      display: flex;
      width: 100%;
      height: calc(100% - 256px);
      margin-top: 16px;
      .noitce {
        width: calc(35% - 16px);
        height: 100%;
        text-align: center;
        font-size: 24px;
        font-weight: 600;
        .important_msg {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 50px;
          background-color: rgba(0, 0, 0, 0.3);
          border-top-right-radius: 8px;
          border-top-left-radius: 8px;
          color: rgb(245, 170, 9);
        }
        .warning_information {
          height: calc(50% - 30px);
          line-height: 50px;
          .warning_title {
            height: 30px;
            width: 200px;
            line-height: 30px;
            margin: 8px auto;
            font-size: 16px;
            color: #fff;
            border-radius: 15px;
            background-color: rgb(59, 59, 59);
          }
          .warning_list {
            height: calc(100% - 52px);
            overflow-y: scroll;
            /* .warning_item:first-of-type {
              border-top: 1px solid rgb(220, 220, 220);
            } */
            .warning_item {
              display: flex;
              height: 40px;
              line-height: 40px;
              padding-left: 16px;
              text-align: left;
              font-size: 14px;
              font-weight: 500;
              border-bottom: 1px solid rgb(220, 220, 220);

              .warning_item_index {
                width: 25px;
                height: 40px;
                line-height: 40px;
                text-align: center;
              }
              .warning_item_content {
                width: calc(100% - 50px);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
      .cur_video {
        width: calc(70% - 48px);
        margin-left: 16px;
        padding: 16px;
        video {
          display: block;
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}

:deep(.el-calendar) {
  background-color: transparent !important;
  .el-button-group {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
  }
  .el-button {
    background-color: transparent;
    color: #fff;
  }
  .el-calendar-table thead th {
    color: #fff;
  }
  .el-calendar__body {
    padding: 8px 16px !important;
  }
  .el-calendar-day {
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0;
    font-size: 14px;
  }

  .is-selected {
    color: #fff !important;
    background-color: rgb(150, 150, 150);
  }

  .is-today {
    color: black;
    font-weight: 600;
  }
  .el-calendar-day:hover {
    background-color: rgb(197, 197, 197);
  }
}
</style>
